1. START
  2. Overview
  3. html
  4. css
  5. fonts
  6. javaScript
  7. explaining every section
    1. NAVIGATION MENU
    2. BANNER
    3. ABOUT
    4. TEAM
    5. SERVICES
    6. WORK
    7. TESTIMONIAL and CLIENTS SECTION
    8. BLOG POST SECTION
    9. CONTACT SECTION
    10. FOOTER
  8. credits
  9. thanks!

Birva Creative Studio :: Onepage Bootstrap Parallax Multipurpose Theme

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form abmathasuriya on ThemeForest. Thanks so much!

Overview

Birva Creative Studio theme is built using Bootstrap v3.0.2 framework: Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of 3 more folders for diferent types of theme assets:

  1. Images - contaning all images for the theme design
  2. js -containing all scripts for the jquery effects
  3. fonts - fonts folder contains font file for font-awesome fonts
  4. css - containing all CSS files for the theme. css folder further contains one folder named color for theme color.
  5. get_mail.php - PHP script for mail functionality.

These theme has 10 different and beautiful colors which you can switch using style switcher. Further You can set any color out of these by specifying color in respective color.css style. Theme banner with beautiful charecter effect in name.

Installation

This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the three folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.

HTML

The theme is based on Bootstrap v3.0.2 framework. The general template structure is the same throughout the template. Here is the general structure.

  1. Navigation
  2. Banner
  3. About
  4. Team
  5. Services
  6. Portfolio
  7. Testimonials
  8. Blog
  9. Contact
  10. Footer

Below are the general HTML structure of index page.

HTML general Structure

Each section further described in Explaining every section

CSS

The theme comes with 6 CSS (stylesheet) files grouped in the css folder:

1. bootstrap.css Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

2. style.css is the main CSS file containg the layout styling of the pages.

3. font-awesome.css contains the iconic font style.

4. color-default.css contains the theme default color style i.e. red and all other color style are grouped in the color folder. It is used to switch theme color depending on the option selected. i.e. color1.css, color2.css, color3.css. color4.css, color5.css,color6.css, color7.css, color8.css and color9.css

The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.

5. perfect-scrollbar.css contain the style used in time line section.

6. magnific-popup.css contain the style for pop-up used in portfolio detail section.

Fonts

This theme uses Oswald google fonts and Open Sans .

JavaScript

This template is heavily loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:

Some of the jQuery plugins are heavily customized and chages in their files are not recommended.

All JS functions related to the theme content management are placed in scripts.js. The scripts.js file is responsible for the main functions like Portfolio item display, shrink top header, header visibility, Menu smooth scroll, Mobile menu, PARALLAX, pie chart, Number counter, Back to Top, twitter feed, and all slider initialization script.

To change twitter username in script.js file, go to commented line called twitter feed and change username parameter.

The full list of options and features are available on: - Tweetable

Explaining every section

This section explains how every section is implemented.

NAVIGATION MENU

The navigation menu, div containing class navbar contains fixed navigation menu:

  1. Logo
  2. Main menu for pages

navigation menu visibility control by JavaScript function. div id "my-nav" contains navigation menu. div class "navbar-brand" contains logo with float left. To change the logo, just replace the file images/04_small-logo.png. The smooth scroll effect is controlled by jQuery plugin. The screenshot below explains code for fixed menu and logo.
logo menu

All navigation menu style contains in style.css style with comments like /* Navigation Bar */

Mobile Menu

This theme has a in built bootstrap Mobile Menu.

BANNER

Section containing class "banner" contains parallax banner with banner text. div containing class "banner" contains banner background image. To change background image, just place your background image in the images folder and open style.css file and go to style .banner and replace the image name in background-image style.

Banner with beautiful letters effect contain in h1 tag class "funny-text". You can control color and speed by changing perameter in initialization script script tag at the end of the index file.

Unordered list id "aboutme" contain list ticker. div containing class "social" contain social icon.

parallax effect is implemented using jquery.parallax-1.1.3.js. Banner visibility and banner text ticker is controlled by custom javascript in script.js file.

banner

The banner styles are marked under /* Banner Section */ in style.css file

Slider Theme

Section containing class "banner" contains slider with banner text. Slider unordered list generated from javascript. Below are the general HTML structure and Javascript at the end of the index page contains images path.

banner banner

The slider styles are contains in supersized.css file

ABOUT SECTION

All html in this section is nested within a section with an id of "about". About section contains:

  1. about us header image
  2. pie chart
  3. time line / history
  4. statistics
  5. our process

About

about us header image description

About us fullscreen header image strip size 1280x519 and its parallax effect is control by custom javascript in script.js file.

Pie Chart

Div containing class col-sm-3 contains pie chart and its animation effect is control by easypiechart plugin. Div class "pieChart" contains "data-bar-width" option and "data-percent" option control the percentage of individual pie chart.

piechart

Time line / History

Div class "timeline" contains time line section with inner class "bg" contains fixed background image. perfect-scrollbar plugin controls time line scroll bar.

timeline

Statistics / Number counter

Div class "statistics" contains number counter. Counter counts is control by custom javascript in script.js i.e. comments like "//Count numbers". You can control the speed of counter from scripts.js file. "countUp" property you can set to high or law for number counter speed in script.js file.

numbercounter

Our process

Div class "process" contains process slider. Div class "process-steps-wrapper" contains process steps with icon image and unordered list "slides" contains details of individual process. Slider control by flexslider plugin.

process

All styles for this section in style.css style are available under commented /* About us section */

TEAM SECTION

All html in this section is nested within a div with an id of "team". The HTML consist of a fullscreen div that contains slide control, team description, team member image and team social icon.

Unordered list "slider" contains full screen team slider. List item contains:

  1. team member name
  2. team member designation
  3. team member image
  4. description of team member
  5. social links

team

List slide with id like "#carousel-3-0-slide0", "#carousel-3-0-slide1", "#carousel-3-0-slide2" contains bottom left background images for individual slides. If you want to add another slide then you have to add "#carousel-3-0-slide4" in style.css file with background image. Below are the general screen shot for setting background image.

teamstyle

Used custom javascript and carousel plugin for team slider.

All style contains in style.css style with comments like /* Team Section */

SERVICES SECTION

All html in this section is nested within a div with an id of "services". Service section contains masonry service block and contains:

  1. Service block
  2. Action button

Service Block

Div class "our-service-container" contains masonry service block with service icon and service description. below are the HTML structure of service block.

service-block

Used masonry plugin for displaying service block.

PARALLAX SECTION

Parallax background section contains action button with parallax image. div class "getInTouch-bg" contains background image. Below are the general html

work block
Video theme Action button

Video section contains action button with youtube background video. Div class "container-video" contains background youtube video. You have to just specify a youtube video id in script. Script is easily understands with comments. below are the general HTML structure for video section.

work block

All style contains in style.css file with comments like /* Service section */

WORK/PORTFOLIO SECTION

The next code shows an example of works/portfolio grid. All html in this section is nested within a div with an id of "portfolio". Below are the general html for work section.

Work page

Unordered list "portfolio-grid" contains work grid blocks. Div class "col-md-4" contains portfolio grid with thumbnail image, meta detail and caption background with description.

work block filter category contains in "col-md-4" class i.e. ui-design,web-design,graphics etc.. with "mix_all" class for displaying all works. So the general structure like "

  • ".

    "portfolio-item" class contains thumbnail images with links to open detail for individual works in popup. Anchor tag with href attributes and class "folio" is important for displaying detail in popup window. For example "[a href="6" class="folio"]"

    Here anchor tag with href property set to "6" so div containing class "container" in Work Detail pop-up portion has div class "[class="all-items portfolio-popup mfp-hide" id="href6"] with an ID="href6". so item anchor tag href value and detail popup div with id href[value] must be same to open correct popup for individual work item.

    Below are the structure of portfolio grid and respective detail popup block

    work block work block

    All work/portfolio styles in style.css file are commented under /* Portfolio Section */

    POPUP BLOCK

    Below Work Thumbnail portion div class "container" contains Work Detail pop-up portion with:

    1. Work previous-next control top and bottom
    2. Work detail slider
    3. Work detail overview
    4. Work detail action button

    Div class "all-items portfolio-popup mfp-hide" contains individual popup portion for respective work item. Each work item links to popup portion by item anchor tag property href[number] with div with id="href[number]" in popup portion.

    Unordered list "popup-nav-top" contains top Work previous-next control. Below are the general structure for popup previous next control.

    popuptop

    Div class "project-slider" contains work image slider with slider control.

    Div class "item-overview" contains overview or detail description of work.

    Div class "item-skills" contains skill block for work with action button or link button.

    Unordered list "popup-nav-top" contains bottom Work previous-next control.

    Below are the general HTML structure.

    work-popup section

    Used custom javascript, jquery.magnific-popup.min.js and jquery.carousel plugin for work section.

    All style contains in style.css file are available under commented /* Portfolio Section */

    TESTIMONIAL and CLIENTS SECTION

    All html in this section is nested within a div with an id of "testimonials". The HTML consist of a containers that contains testimonial image, testimonial details. Div with an id of "clients" contain clients slider.

    Div containing class "container" contains testimonial with a div id "da-slider". Below are the general HTML structure for testimonial slider.

    testimonial

    Used jquery.cslider.js plugin for testimonial slider.

    Clients Slider

    All html in this section is nested within a div with an id of "clients". Unordered list id "clients-slider" contains clients logo. Below are the general HTML structure for clients slider

    clients

    All style contains in style.css file with comments like /* Testimonials Section */

    BLOG POST SECTION

    All html in this section is nested within a div with an id of "blogpost". blog post section contains:

    1. Blog post slider
    2. Parallax background image with twitter live feed

    Blog post slider

    Div class "post-slider" contains unordered list class "slider" contains post slider. below are the HTML structure of service block.

    blog-post

    Used custom javascript for toggle service detail in service block.

    All style contains in style.css style with comments like /* blog section */

    CONTACT SECTION

    All html in this section is nested within a div with an id of "contact". The HTML consist of a containers that contains:

    1. contact heading
    2. contact details like address, phone and email
    3. contact form with validation
    4. PHP script to send mail

    get_mail.php script contain php code for sending mail from contact form. open get-mail.php in editor and just change email address in get_mail.php save it and upload on live server.

    contact

    All style contains in style.css file with comments like /* Contact Section */

    All html in this section is nested within a div with an class of "footer". Below are the general HTML structure for footer section which contains social icon and text. contact

    All style contains in style.css file with comments like /* Footer Section */

     

    • Credits

    Thanks!

    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    please feel free to send me a message here: abmathasuriya on ThemeForest.